<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<%=request.getContextPath()%>/res/datepicker/WdatePicker.js" ></script>
<title>客户账单</title>
<script>
function add(){
	if(!$("#customerId").val())return;
	resetForm();
}
function resetForm(){
	$("#edit_form")[0].reset();
	$("#id").val('');
	$("#div_edit").toggle();
	typeChange();
}
function edit(id){
	$("#div_edit").show();
	var url = '<%=request.getContextPath() %>/cbill/load.do?id='+id;
	var callback = function(data){
		if(data.success != 1)return;
		$("#id").val(data.id);
		$("#date").val(data.dateStr);
		$("#money").val(data.money);
		$("input[name=type][value="+data.type+"]").attr("checked",true);
		$("input[name=payType][value="+data.payType+"]").attr("checked",true);
		$("#remark").val(data.remark);
		typeChange();
	};
	$.post(url, null,callback,'json').error(function() { alert('操作失败！'); });
}
function del(id){
	if(!confirm("确定要删除数据吗？")){
		return; 
	}
	var url = '<%=request.getContextPath() %>/cbill/del.do?id='+id;
	var callback = function(data){
		if(data == "1"){
			location.reload();
 	  	}else if(data == "-1"){
 	  		alert("删除失败");
 	  	}else{
 	  		alert("系统繁忙，请稍后再试   [data:"+data+"]");
 	  	}
	};
	$.post(url, null,callback,'json').error(function() { alert('删除失败！'); });
}
function save(){
	var queryString = $('#edit_form').formSerialize();
	var url = '<%=request.getContextPath() %>/cbill/save.do';
	var callback = function(data){
		if(data == "1"){
			location.reload();
 	  	}else if(data == "-1"){
 	  		alert("保存失败");
 	  	}else{
 	  		alert("系统繁忙，请稍后再试   [data:"+data+"]");
 	  	}
	};
	$.post(url, queryString,callback,'json').error(function() { alert('操作失败！'); });
}

function loadCustomer(id){
	if(!id)return;
	location.href = "<%=request.getContextPath() %>/cbill/loadCustomerBill.do?id="+id;
}
function loadCBill(cid,m){
	if(!cid)return;
	var y = $("#y").val();
	location.href = "<%=request.getContextPath() %>/cbill/loadCustomerBill.do?id="+cid+"&y="+y+"&m="+m;
}
function typeChange(){
	var t = $("input[name=type]:checked").val();		
	if(t==1){$("#tr_pt").hide();}else{$("#tr_pt").show();};
}

</script>
</head>
<body>
<jsp:include page="/admin/header.jsp" flush= "true ">
      <jsp:param name="m" value="cbill"   />
</jsp:include>
<div style="margin:0 auto;width: 90%;" >
<hr/>

<table>
	<tr>
		<td valign="top" >
			<select style="width: 130px" size="35" onchange="loadCustomer(this.value);" >
				<option value="" >----请选择---</option>
				<c:forEach items="${customerList}" var="d" varStatus="i" >
				<option value="${d.id }" >${d.name }</option>
				</c:forEach>
			</select>		
		</td>
		<td></td>
		<td valign="top" style="display: ${customerId>0?'block':'none' }"  >
			<div>
				<a href="javascript:add();" ><span style="vertical-align:middle;"><img src="<%=request.getContextPath() %>/res/images/add2.gif"></span>添加</a> &nbsp;
				<span style="margin-right: 0px;width: 200px;text-align: right;" >
				年份:<select id="y" name="y" >
						<option value="2014" ${year==2014?"selected":"" }  >2014</option>
						<option value="2015" ${year==2015?"selected":"" } >2015</option>
						<option value="2016" ${year==2016?"selected":"" } >2016</option>
						<option value="2017" ${year==2017?"selected":"" } >2017</option>
						<option value="2018" ${year==2018?"selected":"" } >2018</option>
					</select>
				</span>
				<span style="margin-right: 0px;width: 200px;text-align: right;" >
				月份:<select id="m" name="m" onchange="loadCBill(${customerId },this.value);" >
						<option value="1" ${month==1?"selected":"" } >1</option>
						<option value="2" ${month==2?"selected":"" }>2</option>
						<option value="3" ${month==3?"selected":"" }>3</option>
						<option value="4" ${month==4?"selected":"" }>4</option>
						<option value="5" ${month==5?"selected":"" }>5</option>
						<option value="6" ${month==6?"selected":"" }>6</option>
						<option value="7" ${month==7?"selected":"" }>7</option>
						<option value="8" ${month==8?"selected":"" }>8</option>
						<option value="9" ${month==9?"selected":"" }>9</option>
						<option value="10" ${month==10?"selected":"" }>10</option>
						<option value="11" ${month==11?"selected":"" }>11</option>
						<option value="12" ${month==12?"selected":"" }>12</option>
					</select>
				</span>
			</div>
			<hr />
			<div id="div_edit" style="display: none" >
				<form action="" method="post" id="edit_form" >
					<input type="hidden" id="id" name="id" />
					<input type="hidden" id="customerId" name="customerId" value="${customerId }" />
					<table>
						<tr><td align="right" width="100px" >客户：</td><td>${customerName }</td></tr>
						<tr><td align="right">日期：</td><td><input id="date" name="date" size="15" type="text" onClick="WdatePicker()" readonly="readonly"  /></td></tr>
						<tr><td align="right">类别：</td><td><input type="radio" name="type" value="1" checked="checked" onchange="typeChange();"  />欠款&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="type" value="2" onchange="typeChange();" />还款</td></tr>
						<tr><td align="right">金额：</td><td><input type="text" id="money" name="money" /></td></tr>
						<tr id="tr_pt" style="display:none;" ><td align="right">支付方式：</td><td>
							<input type="radio" name="payType" value="1"  />现金&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="payType" value="2" />转账&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="payType" value="3"  />刷卡&nbsp;&nbsp;&nbsp;&nbsp;
						</td></tr>
						<tr><td align="right">备注：</td><td><input type="text" id="remark" name="remark" size="80" /></td></tr>
						<tr><td>&nbsp;</td><td><input type="button" value="保存" onclick="save();" >&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="清空" onclick="resetForm();" ></td></tr>
					</table>
				</form>
				<hr/>
			</div>
			<div >
				<b>${customerName }&nbsp;-&nbsp;${year } 年 ${month } 月 对账单</b>
				&nbsp;&nbsp;&nbsp;&nbsp;当月：欠款 <font color="red" >${month_qk}</font>&nbsp;&nbsp;还款<font color="red" >${month_hk}</font><br/>
				&nbsp;&nbsp;&nbsp;&nbsp;累计：总欠款 <font color="red" >${all_qk}</font>&nbsp;&nbsp;总还款<font color="red" >${all_hk}</font>
			</div>
			<table class="myTable" >
				<tr class="chtr" >
					<td width="30" >&nbsp;</td><td width="100" >日期</td><td width="100" >金额</td><td width="50" >类别</td><td width="100" >付款方式</td><td width="130" >备注</td><td width="120px">&nbsp;</td>
				</tr>
				<c:forEach items="${cbills_data }" var="d" varStatus="i" >
				<tr>
					<td align="center" >${d.id }</td><td><fmt:formatDate value="${d.date }" type="date" pattern="yyyy-MM-dd"/></td><td>${d.money }</td>
						<td>${d.type==1?"欠款":d.type==2?"还款":"异常" }</td>
						<td>${d.payType==1?"现金":d.payType==2?"转账":d.payType==3?"刷卡":"--" }</td>
						<td>${d.remark }</td>					
					<td>
					&nbsp;<a href="javascript:edit(${d.id });" ><span style="vertical-align:middle;"><img src="<%=request.getContextPath() %>/res/images/edit.gif"></span>修改</a>&nbsp;
					&nbsp;<a href="javascript:del(${d.id });" ><span style="vertical-align:middle;"><img src="<%=request.getContextPath() %>/res/images/delete.gif"></span>删除</a>&nbsp;
					</td>
				</tr>
				</c:forEach>
			</table>
		</td>		
	</tr>
</table>


</div>
<%@include file="/admin/bottom.jsp" %>
</body>
</html>
